<template>
<div>
  <Header></Header>
  email/mobile:
<input type="text" v-model="email_mobile">
  <div v-if="is_show_sms_code">
    验证码:
    <input type="text" v-model="sms_code">
    <button @click.stop.prevent="send_sms">发送短信</button>
    </div>
  <div v-if="is_show_email_code">
    验证码:
    <input type="text" v-model="sms_code">
    <button @click.stop.prevent="send_email">发送邮件</button>
    </div>
  新密码:
<input type="text" v-model="password">
  <button @click.stop.prevent="change_password"></button>
  </div>
</template>



<script>
    export default {
        name: "ForgotPassword",
        watch:{
            email_mobile(){
                this.is_show_sms_code = /^1[3-9]\d{9}$/.test(this.email_mobile);
                this.is_show_email_code = /^\w+@\w+\.\w+$/.test(this.email_mobile);
                if(this.is_show_email_code){
                    this.check_email_mobile();
                }else if(this.is_show_sms_code){
                    this.check_email_mobile();
                }
                else{}

            }
        },
        data(){
            return {
                is_show_sms_code:'',
                is_show_email_code:'',
                is_send_sms:'',
                is_send_email:'',
                email : '',
                password : '',
                sms_code:'',
                email_mobile:'',
                sms_code_text:'',
                email_code_text:'',

            }
        },
        methods:{
            check_email_mobile(){
                this.$axios.get(`${this.$settings.Host}/users/forgot_password/`,{
                    params:{
                        email_mobile:this.email_mobile
                    }
                }).then(response=>{
                }).catch(error=>{
                   this.$message.error(error.response.data.message);
                   this.is_show_sms_code = false;
                   this.is_show_email_code = false;
                });
            },
            send_sms(){
                // 判断是否在60s的冷却时间内
                if(this.is_send_sms){
                    return;
                }

                // 发送短信
                this.$axios.get(`${this.$settings.Host}/users/sms/${this.email_mobile}/`).then(response=>{
                  this.$message.success(response.data.message);
                  this.is_send_sms = true;
                  let t = 60;
                  let timer = setInterval(()=>{
                      if(--t<1){
                          this.sms_code_text = "发送验证码";
                          this.is_send_sms = false; // 允许重新点击发送验证码
                          clearInterval(timer);     // 关闭倒计时
                      }else{
                          this.sms_code_text = `${t}秒后点击发送`;
                      }
                  },1000);
                }).catch(error=>{
                  this.$message.error(error.response.data.message);
                })
            },
            change_password(){

                 this.$axios.put(`${this.$settings.Host}/users/forgot_password/`,{
                email_mobile: this.email_mobile,
                password: this.password,
                sms_code: this.sms_code,
            }).then(response=> {

              this.$confirm('密码修改成功, 欢迎加入荏苒！', '提示', {
                confirmButtonText: '跳转到首页',
                cancelButtonText: '跳转上一页',
                type: 'success'
              }).then(() => {
                this.$router.push("/");
              }).catch(() => {
                this.$router.go(-1);
              });

            }).catch(error=>{
                this.$message.error("密码修改失败！");
            })
            },
            send_email(){
                 if(this.is_send_sms){
                    return;
                }

                // 发送短信
                this.$axios.get(`${this.$settings.Host}/users/send_email/${this.email_mobile}/`).then(response=>{
                  this.$message.success(response.data.message);
                  let t = 60;
                  let timer = setInterval(()=>{
                      if(--t<1){
                          this.email_code_text = "发送验证码";
                          this.is_send_email = false; // 允许重新点击发送验证码
                          clearInterval(timer);     // 关闭倒计时
                      }else{
                          this.email_code_text = `${t}秒后点击发送`;
                      }
                  },1000);
                }).catch(error=>{
                  this.$message.error(error.response.data.message);
                })
            }
        },




    }
</script>

<style scoped>

</style>
